<template>
  <div>
    <div class="Order_form_list">
      <table>
        <thead>
        <tr><td class="list_name_title0">商品</td>
          <td class="list_name_title1">单价(元)</td>
          <td class="list_name_title2">数量</td>
          <td class="list_name_title4">实付款(元)</td>
          <td class="list_name_title5">订单状态</td>
          <td class="list_name_title6">操作</td>
        </tr>
        </thead>
        <tbody>
        <tr class="Order_info"><td colspan="6" class="Order_form_time"><input name="" type="checkbox" value=""  class="checkbox"/>下单时间：2015-12-3 | 订单号：445454654654654 <em></em></td></tr>
        <tr class="Order_Details">
          <td colspan="3">
            <table class="Order_product_style">
              <tbody>
              <tr>
                <td>
                  <div class="product_name clearfix">
                    <a href="#" class="product_img"><img :src="baseURL+'/static/common/logo.jpg'" width="80px" height="80px"></a>
                    <a href="3" class="p_name">天然绿色多汁香甜无污染水蜜桃</a>
                    <p class="specification">礼盒装20个/盒</p>
                  </div>
                </td>
                <td>5</td>
                <td>2</td>
              </tr>
              </tbody>
            </table>
          </td>
          <td class="split_line">100</td>
          <td class="split_line"><p style="color:#F30">已发货，待收货</p></td>
          <td class="operating">
            <a href="#">查看订单</a>
            <a href="#">查看物流</a>
            <a href="#">联系客服</a>
            <a href="#">删除</a>
          </td>
        </tr>
        </tbody>
        <tbody>
        <tr class="Order_info on"><td colspan="6" class="Order_form_time"><input name="" type="checkbox" value=""  class="checkbox"/>下单时间：2015-12-3 | 订单号：445454654654654</td></tr>
        <tr class="Order_Details" >
          <td colspan="3">
            <table class="Order_product_style">
              <tbody><tr>
                <td>
                  <div class="product_name clearfix">
                    <a href="#" class="product_img"><img :src="baseURL+'/static/common/logo.jpg'" width="80px" height="80px"></a>
                    <a href="3" class="p_name">天然绿色多汁香甜无污染水蜜桃</a>
                    <p class="specification">礼盒装20个/盒</p>
                  </div>
                </td>
                <td>5</td>
                <td>2</td>
              </tr>
              <tr>
                <td>
                  <div class="product_name clearfix">
                    <a href="#" class="product_img"><img :src="baseURL+'/static/common/logo.jpg'" width="80px" height="80px"></a>
                    <a href="3" class="p_name">天然绿色多汁香甜无污染水蜜桃</a>
                    <p class="specification">礼盒装20个/盒</p>
                  </div>
                </td>
                <td>5</td>
                <td>2</td>
              </tr>
              </tbody></table>
          </td>
          <td class="split_line">100</td>
          <td class="split_line"><p style="color:#F30">交易已成功</p><p style="color:#999">已评论</p></td>
          <td class="operating">
            <a href="#">查看订单</a>
            <a href="#">查看物流</a>
            <a href="#">申请售后</a>
            <a href="#">删除</a>
          </td>
        </tr>
        </tbody>
        <tbody>
        <tr class="Order_info"><td colspan="6" class="Order_form_time"><input name="" type="checkbox" value=""  class="checkbox"/>下单时间：2015-12-3 | 订单号：445454654654654</td></tr>
        <tr class="Order_Details" >
          <td colspan="3">
            <table class="Order_product_style">
              <tbody><tr>
                <td>
                  <div class="product_name clearfix">
                    <a href="#" class="product_img"><img :src="baseURL+'/static/common/logo.jpg'" width="80px" height="80px"></a>
                    <a href="3" class="p_name">天然绿色多汁香甜无污染水蜜桃</a>
                    <p class="specification">礼盒装20个/盒</p>
                  </div>
                </td>
                <td>5</td>
                <td>2</td>
              </tr>
              </tbody></table>
          </td>
          <td class="split_line">100</td>
          <td class="split_line"><p style="color:#F33">买家已付款</p></td>
          <td class="operating">
            <a href="#">查看订单</a>
            <a href="#">在线客服</a>
            <a href="#" class="Delivery_btn">确认收货</a>
          </td>
        </tr>
        </tbody>
        <tbody>
        <tr class="Order_info"><td colspan="6" class="Order_form_time"><input name="" type="checkbox" value=""  class="checkbox"/>下单时间：2015-12-3 | 订单号：445454654654654</td></tr>
        <tr class="Order_Details">
          <td colspan="3">
            <table class="Order_product_style">
              <tbody><tr>
                <td>
                  <div class="product_name clearfix">
                    <a href="#" class="product_img"><img :src="baseURL+'/static/common/logo.jpg'" width="80px" height="80px"></a>
                    <a href="3" class="p_name">天然绿色多汁香甜无污染水蜜桃</a>
                    <p class="specification">礼盒装20个/盒</p>
                  </div>
                </td>
                <td>5</td>
                <td>2</td>
              </tr>
              </tbody></table>
          </td>
          <td class="split_line">100</td>
          <td class="split_line">等待买家付款</td>
          <td class="operating">
            <a href="#">查看详细</a>
            <a href="#">查看物流</a>
            <a href="#">取消订单</a>
            <a href="#">删除</a>
          </td>
        </tr>
        </tbody>
        <tbody>
        <tr class="Order_info"><td colspan="6" class="Order_form_time"><input tabindex="13" type="checkbox" id="flat-checkbox-1">下单时间：2015-12-3 | 订单号：445454654654654</td></tr>
        <tr class="Order_Details">
          <td colspan="3">
            <table class="Order_product_style">
              <tbody><tr>
                <td>
                  <div class="product_name clearfix">
                    <a href="#" class="product_img"><img :src="baseURL+'/static/common/logo.jpg'" width="80px" height="80px"></a>
                    <a href="3" class="p_name">天然绿色多汁香甜无污染水蜜桃</a>
                    <p class="specification">礼盒装20个/盒</p>
                  </div>
                </td>
                <td>5</td>
                <td>2</td>
              </tr>
              </tbody></table>
          </td>
          <td class="split_line">100</td>
          <td class="split_line"><p style="color:#F33">确认收货</p><p style="color:#CCC">买家未评价</p></td>
          <td class="operating">
            <a href="#">查看详细</a>
            <a href="#">在线客服</a>
            <a href="#" class="Refund_btn">评价商品</a>

          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "list"
}
</script>

<style lang="less" scoped>
.Order_form_list {
  border-bottom:1px solid #ddd;
  border-left:1px solid #ddd;
  border-right:1px solid #ddd;
  width: 1200px;
  margin: 0 auto;
}
.Order_form_list table {
  width:100%;
  font-family:""
}
.Order_form_list table thead td {
  line-height:40px;
  height:40px;
  padding:0px;
  text-align:center;
  background:#ECECEC;
  border-top:1px solid #ddd
}
.Order_form_list table thead td.list_name_title0 {
  width:400px;
}
.Order_form_list table thead td.list_name_title1 {
  width:80px;
}
.Order_form_list table thead td.list_name_title2 {
  width:80px;
}
.Order_form_list table thead td.list_name_title4 {
  width:110px
}
.Order_form_list table thead td.list_name_title5 {
  width:170px;
}
.Order_form_list table thead td.list_name_title6 {
  width:158px;
}
.Order_form_list table  td.Order_form_time {
  border-top:1px solid #ddd;
  height:30px;
  background:#ECFBD7;
  text-align:left;
  line-height:30px;
  padding:0px 10px;
  color:#333
}
.Order_form_list table tr.Order_info.on em {
  background-position:16px -57px;
}
.Order_form_list table tr.Order_info.on {
  height:30px
}
.Order_form_list table tr.Order_info {
  height:40px;
}
.Order_form_list table  td {
  padding:10px;
  position:relative;
  text-align:center
}
.Order_form_list table  td.operating a {
  line-height:30px;
  display:block
}
.Order_form_list table  td.operating a.Delivery_btn {
  border:1px solid  #F33;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  color:#FFF;
  padding:0px 5px;
  FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#F60,endColorStr=#F33);
  /*IE*/
  background:-ms-linear-gradient(top,#F60,#F33);
  /* IE10+ */
  background:-moz-linear-gradient(top,#F60,#F33);
  /*火狐*/
  background:-webkit-gradient(linear,0% 0%,0% 100%,from(#F60),to(#F33));
  /*谷歌*/
}
.Order_form_list table  td.operating a.Refund_btn {
  border:1px solid  #F60;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  color:#FFF;
  padding:0px 5px;
  FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#F90,endColorStr=#F60);
  /*IE*/
  background:-ms-linear-gradient(top,#F90,#F60);
  /* IE10+ */
  background:-moz-linear-gradient(top,#F90,#F60);
  /*火狐*/
  background:-webkit-gradient(linear,0% 0%,0% 100%,from(#F90),to(#F60));
  /*谷歌*/
}
.Order_form_list table  td.split_line {
  border-left:1px solid #ddd;
  border-right:1px solid #ddd;
  line-height:30px
}
.Order_form_list table  td .product_name {
  position:relative
}
.Order_form_list table  td .specification {
  position:absolute;
  bottom:10px;
  left:90px;
  color:#999
}
.Order_form_list table  td .product_name a {
  display:block;
  float:left;
  margin-right:10px;
  color:#666;
}
.Order_form_list table  td a.p_name {
  position:absolute;
  left:90px;
  text-align:left;
  line-height:24px;
}
.Order_form_list table  td .product_name a.product_img {
  border:1px solid #ddd;
  width:82px;
  height:82px;
}
.Order_form_list table  td .product_name a:hover {
  color:#F60
}
.Order_form_list table  td .Order_product_style tr {
  border-bottom:1px dotted #ddd;
}
.Order_Operation {
  height:50px;
  padding:0px 10px;
  line-height:50px;
  margin:10px 0px;
  border:1px solid #ddd;
}
.Order_Operation .confirm_Order,.Order_Operation .search_order {
  margin-left:10px;
  height:32px;
  color:#888888;
  border:1px solid #ddd;
  cursor:pointer;
}
.Order_Operation .right_search {
  float:right;
  height:50px;
  line-height:50px;
}
.Order_Operation .add_Ordertext {
  height:30px;
  border:1px solid #ddd;
  padding:0px 5px;
  margin:9px 0px;
  width:300px;
}

</style>
